<script setup>
import { inject } from "vue";

const index = inject("index");

const submit = (current) => {
    index.value = current;
};
</script>
<template>
    <aside class="fixed top-0 left-0 flex flex-col w-48 h-screen py-10 z-40">
        <div
            class="flex flex-col justify-between flex-1 py-6 border-r border-iso-gray-400"
        >
            <nav>
                <p
                    class="flex items-center justify-center px-4 py-4 text-gray-300"
                    @click="submit(1)"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="size-5"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"
                        />
                    </svg>

                    <span
                        class="mx-4 w-20 h-7 leading-7 text-center text-xs bg-iso-blue-600 rounded-full"
                    >
                        注册
                    </span>
                </p>

                <p
                    class="flex items-center justify-center px-4 py-4 text-gray-300"
                    @click="submit(2)"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="size-5"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
                        />
                    </svg>

                    <span
                        class="mx-4 w-20 h-7 leading-7 text-center text-xs bg-iso-blue-600 rounded-full"
                    >
                        登录
                    </span>
                </p>

                <p
                    class="flex items-center justify-center px-4 py-4 text-gray-300"
                    @click="submit(3)"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="size-5"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
                        />
                    </svg>

                    <span
                        class="mx-4 w-20 h-7 leading-7 text-center text-xs bg-iso-blue-600 rounded-full"
                    >
                        VIP
                    </span>
                </p>
            </nav>

            <div class="space-y-5">
                <div class="flex flex-col items-center justify-center">
                    <div class="text-xs text-gray-300 text-center">
                        <p class="h-5 leading-5">添加企业微信</p>
                        <p class="h-5 leading-5">进ISOabc官方交流群</p>
                    </div>
                    <img
                        class="object-cover m-2 h-16 w-16"
                        src="/qr-01.jpg"
                        alt="qr"
                    />
                </div>

                <div class="flex flex-col items-center justify-center">
                    <div class="text-xs text-gray-300 text-center">
                        <p class="h-5 leading-5">关注公众号</p>
                        <p class="h-5 leading-5">了解最新的智造AI资讯</p>
                    </div>
                    <img
                        class="object-cover m-2 h-16 w-16"
                        src="/qr-02.jpg"
                        alt="qr"
                    />
                </div>

                <p
                    class="text-xs flex items-center justify-center text-iso-blue-600"
                >
                    <span @click="submit(4)"> 用户协议 </span>
                    <span class="mx-1">/</span>
                    <span @click="submit(5)"> 隐私政策 </span>
                </p>
            </div>
        </div>
    </aside>
</template>
